<template>
	<view>
		<u-navbar title="张师傅" :background="{background: '#fff'}" back-icon-color="#000" title-color="#000"
			:border-bottom="false">
		</u-navbar>
		<view class="msg-container">
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">你好，我已到达约定地点，请你两分钟内到我车上，不然待会弄死你</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">你当我是厦大的啊？</view>
			</view>
			<view class="msg-item">
				<image src="../../../static/imgs/car-driver.png" class="icon"></image>
				<view class="msg-content">you try try</view>
			</view>
			<view class="msg-item my">
				<image src="../../../static/imgs/wodeyj.png" class="icon"></image>
				<view class="msg-content">not afraid</view>
			</view>
		</view>
		<view style="width: 100%;height: 100rpx;"></view>
		<view class="input-container">
			<input placeholder="点击输入消息" placeholder-class="input-holder" class="input" v-model="msg" />
			<view class="spliter"></view>
			<view class="send-btn">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: ''
			};
		}
	}
</script>

<style lang="scss">
	.msg-container {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;

		.msg-item {
			width: 100%;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;


			.icon {
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
			}

			.msg-content {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
			}

			&.my {
				justify-content: flex-start;
				flex-direction: row-reverse;

				.icon {
					margin-right: 0;
					margin-left: 20rpx;
				}

				.msg-content {
					background: #2D7AFE;
					color: #FFFFFF;
				}
			}
		}
	}

	.input-container {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.input {
			color: #666666;
			padding: 20rpx;
			height: 80rpx;
			width: 60%;
			font-size: 28rpx;
		}

		.input-holder {
			color: #666666;
			font-size: 28rpx;
		}

		.spliter {
			width: 4rpx;
			height: 40rpx;
			background: #d3d3d3;
		}

		.send-btn {
			background: #2D7AFE;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			color: #FFFFFF;
		}
	}
</style>
